<template>
  <div id="breakSetting" v-show="show" class="break-setting">
    <div class="tip-title">Set up break rules for employee meal and rest periods.</div>
    <div class="add-btn-warp">
      <router-link tag="button" v-touch-ripple class="default-btn active add-btn" to="/views/setting/addBreak">+ Add</router-link>
      <Button :disabled="breakSelection.length==0"  class="default-btn" @click="deleteBreak" >Delete</Button>
    </div>
    <div class="table-content">
      <i-table class="table-panel" @on-selection-change="breakTableSelectionChange"  :columns="breakColumns" :data="breakList"></i-table>
    </div>
    <employee-select @done="doneEmployeeRelation" @close="showEmployeeList = false" :selection="employeeListSelection" :show="showEmployeeList" :list="employeeList"></employee-select>
  </div>
</template>

<script>
  import addEmployeeIcon from 'src/assets/images/addEmployee.png'
  import employeeSelect from 'src/pages/org/employee/employeeListSelect.vue'
  export default {
    name: 'breakSetting',
    components: {
      employeeSelect
    },
    props:{
      show:{
        type:Boolean,
        default:false
      }
    },
    data () {
      var t = this;
      return {
        addEmployeeIcon,
        showEmployeeList:false,
        employeeListSelection:[],
        employeeList:[],
        employeeBreakId:null,
        breakColumns:[
          {
            type:'selection',
            width:60,
          },
          {
            key:'name',
            title:"Name"
          },
          {
            key:'type',
            title:"Type"
          },
          {
            key:'employee',
            title:"Employee",
            className:'employee-column',
            render:function (row,column,index) {
              t.$set( t.breakAssign,row.breakId,parseInt(row.isAllEmployee));
              return `<el-checkbox v-model="breakAssign[${row.breakId}]" @change="changeBreakAssign(${row.breakId})"   :true-label="0" :false-label="2">Assign to all </el-checkbox>
                      <img @click="getBreakEmployee(${row.breakId})"  class="add-img" v-if="breakAssign[${row.breakId}] !=0" :src="addEmployeeIcon">`
            }
          },
          {
            key:'active',
            title:"Active",
            render:function (row,column,index) {
              return `
               <i-switch @on-change="breakActiveChange($event,${row.breakId})" :value="${row.actived}">
                  <span slot="open">ON</span>
                  <span slot="close">OFF</span>
              </i-switch>
              `
            }
          },
        ],
        breakSelection:[],
        breakAssign:{},
      }
    },
    created(){
      this.init();
    },
    computed:{
      breakList(){
        return this.$store.getters.breakList;
      },
    },
    watch:{
      show(value){
        if(value){
          this.init();
        }
      },
    },
    methods:{
      init(){
        this.getBreakList();
      },
      getBreakList(){
        this.$store.dispatch('getBreakList');
      },
      breakActiveChange(flag,id){
        this.$store.dispatch('activeBreak',{
          id:id,
          isActivated:flag
        }).then(()=>{this.$Message.success('active success!')})
      },
      deleteBreak(){
        var ids = [];
        for(var i=0;i<this.breakSelection.length;i++){
          ids.push(this.breakSelection[i].breakId);
        }
        this.$Modal.confirm({
          title: 'Delete Break',
          content: '<p>Delete these breaks?</p>',
          loading: true,
          onOk: () => {
            this.$store.dispatch('deleteBreak',{ids:ids}).then(
              () =>{
                this.$Modal.remove();
                this.$Message.info('delete success!');
                this.getBreakList();
              }
            )
          }
        });
      },
      changeBreakAssign(id){
        var isAssign = this.breakAssign[id];
        this.breakAssign[id] ==0?2:0;
        if(!id){
          return;
        }
        this.$store.dispatch('setIsAllEmployee',{
          breakId:id,
          valid:isAssign == 0
        }).then(
          ()=>{
            this.$Message.success('success');
            this.breakAssign[id] ==0?2:0;
          }
        )
      },
      getBreakEmployee(breakId){
        this.$store.dispatch('getBreakEmployeeList',{breakId:breakId}).then(
          (data)=>{
            this.employeeList = data.data;
            this.showEmployeeList =true;
            this.employeeBreakId = breakId;
          }
        );
      },
      doneEmployeeRelation(employeeIds){
        if(employeeIds.length){
          this.$store.dispatch('modifyBreakEmployees',{
            breakId:this.employeeBreakId,
            employeeIdList:employeeIds,
            isAllEmployee:false
          }).then(
            ()=>{
              this.$Message.success('success');
            }
          )
        }
      },
      breakTableSelectionChange(data){
        this.breakSelection = data;
      },

    }
  }
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss">
    @import "src/assets/css/variable.scss";
    .break-setting{
      .table-content{
        .table-panel{
          td{
            height: 66px;
          }
          .employee-column{
            .add-img{
              vertical-align: middle;
              cursor: pointer;
              &:hover{
                opacity: .7;
              }
            }
          }
        }
      }
    }
</style>
